<template>
  <div v-if="couponVisibile" class="coupon-container" @click="onClose">
    <div class="coupon-main">
      <div class="coupon-list">
        <div v-for="(item, index) in couponList" :key="index" class="coupon-item" @click.stop="onClick(item)">
          <div v-if="item.type == 'money'" class="coupon-info">
            <div class="coupon-money">￥{{item.discountAmount}}</div>
            <div class="coupon-type">抵扣券</div>
          </div>
          <div v-else-if="item.type == 'discount'" class="coupon-info">
            <div class="coupon-money">￥{{item.discountAmount * 100}}%</div>
            <div class="coupon-type">折扣券</div>
          </div>
          <div class="coupon-validtime">
            {{ parseTime(item.startValidTime, '{y}-{m}-{d}') }} - {{ parseTime(item.endValidTime, '{y}-{m}-{d}') }}
          </div>
          <div class="coupon-opear">{{ tishiTxt }}</div>
        </div>
      </div>
      <slot></slot>
    </div>
    <div class="tishi">点击蒙层区域关闭</div>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
export default {
  props: {
    couponVisibile: {
      type: Boolean,
      require: true
    },
    couponList: {
      type: Array,
      default: () => []
    },
    tishiTxt: {
      type: String,
      default: "点击领取"
    }
  },
  methods: {
    parseTime,
    onClose() {
      this.$emit('onClose')
    },
    onClick(item) {
      this.$emit('onClickCoupon', item.id)
    }
  },
}
</script>
<style lang="less" scoped>
  .coupon-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 199;
  }
  .coupon-main{
    margin: 1.2rem auto 0;
    width: 90%;
    border-radius: 4px;
    background: #fff;
    padding: .12rem;
    box-sizing: border-box;
  }
  .coupon-item{
    background: #EDA608;
    color: #fff;
    overflow: hidden;
    height: .6rem;
    border-radius: .04rem;
    padding: .1rem;
    &:not(:first-child){
      margin-top: 20px;
    }
  }
  .coupon-info{
    float: left;
    width: 1.1rem;
    text-align: center;
  }
  .coupon-money{
    font-size: .18rem;
  }
  .coupon-type{
    font-size: .12rem;
  }
  .coupon-validtime{
    padding-left: 1.2rem;
    font-size: .13rem;
    text-align: right;
    line-height: 1.8;
  }
  .coupon-opear{
    text-align: right;
    font-size: .14rem;
  }
  .tishi{
    position: absolute;
    top: .5rem;
    width: 100%;
    text-align: center;
    font-size: .13rem;
    color: #ccc;
  }
</style>
